<template>
  <div>
    <s-header :name='"登录"' :back='"/home"' />
    <div class="logo">
      <img  src="../../assets/logo.png" />
    </div>
    
    <van-form @submit="handleLogin">
      <van-field
        v-model="loginForm.username"
        name="用户名"
        label="用户名"
        placeholder="用户名"
        :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field
        v-model="loginForm.password"
        type="password"
        name="密码"
        label="密码"
        autocomplete
        placeholder="密码"
        :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
        v-model="inputCode"
        center
        clearable
        label="验证码"
        placeholder="输入验证码"
        :rules="[{ required: true, message: '请填写验证码' }]"
      >
        <template #button>
          <div @click="refreshCode()">
            <SIdentify :identifyCode="identifyCode"/>
          </div>
        </template>
      </van-field>
      
      <div style="margin: 16px;">
        <router-link to="/register">
          <div class="text">
            没有账号，去注册
          </div>
        </router-link>
        
        <van-button round block type="info" native-type="submit" color="linear-gradient(to right, #ff6034, #ee0a24)">登录</van-button>
      </div>
    </van-form>
    
  </div>
</template>

<script>

import SIdentify from "@/components/SIdentify";
import  sHeader  from '@/components/SHeader';
import { Toast } from 'vant';


export default {
  name: 'loginView',
  components: {
    SIdentify,
    sHeader,
  },
  data() {
    return {
      loginForm: {},
      inputCode: '',
      identifyCode: '',// 验证码
      identifyCodes: '1234567890abcdwerwshdjepJKDHRJHKPLMKQBWP',//验证码随机范围
    }
  },
  mounted() {
    //组件挂载完毕刷新验证码
    this.identifyCode = ''
    this.makeCode(this.identifyCodes, 4)
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    handleLogin() {
      if (this.inputCode.toLowerCase() !== this.identifyCode.toLowerCase()) {
        Toast.error('请填写正确验证码')
        this.refreshCode()
        return
      }
      try {
      this.$toast.loading({
        duration: 0, // 持续展示 toast,永远不会关闭，它会被后续的toast覆盖
        overlay: true, // 整体添加一个遮罩
        message: '加载中...'
      })
      
      this.$store.dispatch('user/login', this.loginForm).then(() => {
          this.$router.push({ path: this.redirect || '/' })
          this.$toast.success('登录成功')
      })
      } catch(err) {
        console.log(err)
        this.$toast.fail('登录失败')
      }
    },
    // 验证码点击刷新方法
    refreshCode() {
        this.identifyCode = ''
    // 4位验证码可以根据自己需要来定义验证码位数
        this.makeCode(this.identifyCodes, 4)
    }, 
    // 随机数
    randomNum(min, max) {
        max = max + 1
        return Math.floor(Math.random() * (max - min) + min)
    },
    // 随机生成验证码字符串
    makeCode(data, len) {
        for (let i = 0; i < len; i++) {
            this.identifyCode += data[this.randomNum(0, data.length - 1)]
        }
    }
  }
}
</script>

<style>
  .logo {
    width: 200px;
    margin: 0 auto;
  }
  .text {
    /* padding-left: 20px; */
    padding-bottom: 10px;
    font-size: 12px;
    color: rgb(0, 102, 255);
  }
  .block {
    height: 50px;
    
  }
</style>